<template>
  <div>
    <v-viewer ref="view"></v-viewer>
    <div class="order-area">
      <div class="customer-area">
        <div class="title">
          <div class="point"></div>
          <span>基础信息</span>
        </div>
        <template>
          <div style="margin:20px 20px;">
            <el-table ref="multipleTable"
                      border
                      stripe
                      :data="[info]"
                      tooltip-effect="light"
                      style="width: 100%">
              <el-table-column label="编号">
                <template slot-scope="scope">
                  <span>{{scope.row.itemNo}}</span>
                </template>
              </el-table-column>
              <el-table-column label="区域">
                <template slot-scope="scope">
                  <span>{{scope.row.area}}</span>
                </template>
              </el-table-column>
              <el-table-column label="品名">
                <template slot-scope="scope">
                  <span>{{scope.row.productName}}</span>
                </template>
              </el-table-column>
              <el-table-column label="品牌">
                <template slot-scope="scope">
                  <span>{{scope.row.brandName}}</span>
                </template>
              </el-table-column>
              <el-table-column label="产品型号">
                <template slot-scope="scope">
                  <span>{{scope.row.sku}}</span>
                </template>
              </el-table-column>
              <el-table-column label="尺寸">
                <template slot-scope="scope">
                  <span>{{scope.row.size}}</span>
                </template>
              </el-table-column>
              <el-table-column label="订货数量">
                <template slot-scope="scope">
                  <span>{{scope.row.quantity}}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="status ==  2"
                               label="单价">
                <template slot-scope="scope">
                  <span>{{scope.row.price}}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="status ==  2"
                               label="总价">
                <template slot-scope="scope">
                  <span>{{scope.row.totalMoney}}</span>
                </template>
              </el-table-column>
              <el-table-column label="主面料">
                <template slot-scope="scope">
                  <span>{{scope.row.mainFabric}}</span>
                  <pic-view :file-list="scope.row.bodyUrlList"
                            upload-class="small-upload close-delete"
                            :pic-name-list.sync="scope.row.bodyNameList"
                            :max-size="scope.row.bodyUrlList?scope.row.bodyUrlList.length:0"
                            @showImg="showImg"></pic-view>
                </template>
              </el-table-column>
              <el-table-column label="抱枕面料">
                <template slot-scope="scope">
                  <span>{{scope.row.bolsterFabric}}</span>
                  <pic-view :file-list="scope.row.pillowUrlList"
                            upload-class="small-upload close-delete"
                            :pic-name-list.sync="scope.row.pillowNameList"
                            :max-size="scope.row.pillowUrlList?scope.row.pillowUrlList.length:0"
                            @showImg="showImg"></pic-view>
                </template>
              </el-table-column>
              <el-table-column label="主面料木质部分材质">
                <template slot-scope="scope">
                  <span>{{scope.row.woodTexture}}</span>
                  <pic-view :file-list="scope.row.woodenUrlList"
                            upload-class="small-upload close-delete"
                            :pic-name-list.sync="scope.row.woodenNameList"
                            :max-size="scope.row.woodenUrlList?scope.row.woodenUrlList.length:0"
                            @showImg="showImg"></pic-view>
                </template>
              </el-table-column>
              <el-table-column label="其他材质备注">
                <template slot-scope="scope">
                  <span>{{scope.row.otherTexture}}</span>
                  <pic-view :file-list="scope.row.otherUrlList"
                            upload-class="small-upload  close-delete"
                            :pic-name-list.sync="scope.row.otherNameList"
                            :max-size="scope.row.otherUrlList?scope.row.otherUrlList.length:0"
                            @showImg="showImg"></pic-view>
                </template>
              </el-table-column>
              <el-table-column v-if="info.manufactorCode"
                               label="供货方订单编号">
                <template slot-scope="scope">
                  <span>{{scope.row.manufactorCode}}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="status ==  2 && info.productCost"
                               label="货物成本">
                <template slot-scope="scope">
                  <span>{{scope.row.productCost}}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="status ==  2 && info.extraCost"
                               label="额外成本">
                <template slot-scope="scope">
                  <span>{{scope.row.extraCost}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
        <el-row>
          <el-col :span="2">官网截图：</el-col>
          <pic-view :file-list="info.officialUrlList"
                    upload-class="short-upload close-delete"
                    :pic-name-list.sync="info.officialNameList"
                    :max-size="info.officialUrlList?info.officialUrlList.length:0"
                    @showImg="showImg"></pic-view>
        </el-row>
        <el-row>
          <el-col :span="2">产品图片：</el-col>
          <pic-view :file-list="info.productUrlList"
                    upload-class="short-upload close-delete"
                    :pic-name-list.sync="info.productNameList"
                    :max-size="info.productUrlList?info.productUrlList.length:0"
                    @showImg="showImg"></pic-view>
        </el-row>
        <el-form :inline="true">
          <template v-if="status ==  2">
            <el-form-item label="供货方订单编号：">
              <el-input size="small"
                        v-model="info.manufactorCode"
                        placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="货物成本：">
              <el-input size="small"
                        v-model.number="info.productCost"
                        placeholder="单位(元)"></el-input>
            </el-form-item>
            <el-form-item label="额外成本：">
              <el-input size="small"
                        v-model.number="info.extraCost"
                        placeholder="单位(元)"></el-input>
            </el-form-item>
            <el-form-item label="付款时间：">
              <el-date-picker v-model="info.paymentTime"
                              type="date"
                              format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </template>
        </el-form>
        <el-form>
          <el-form-item v-if="status ==  2">
            <el-col :span="4">
              <el-radio v-model="info.status"
                        label=4
                        border>审批通过</el-radio>
              <el-radio v-model="info.status"
                        label=3
                        border>审批不通过</el-radio>
            </el-col>
            <el-col v-if="info.status == 3"
                    :span="6">
              <el-input v-model.number="info.itemMark"
                        placeholder="请输入未通过理由"
                        size="medium"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div class="foot">
          <el-button type="primary"
                     @click="judgeChildOrder">确定</el-button>
          <el-button @click="() => {this.$router.go(-1)}">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
</style>

<script>
import { getToken } from '@/utils/auth'
import '@/style/info.scss'
import picView from '@/components/pic-viewer-up'
import vViewer from '@/components/v-viewer'
import vSteps from '@/components/v-steps'
import '@/style/common.scss'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { api } from '@/api'
import { packageImgList } from '@/utils/imgPackage'
import { validatenull, vListLength } from '@/utils/validate'
import { total, productTitle } from '@/utils/filters'

export default {
  data() {
    return {
      childId: this.$route.params.childId || null,
      status: this.$route.params.status || null,
      info: {}
    }
  },
  components: {
    picView, vViewer, vSteps
  },
  activated() {
    this.getChildOrder()
  },
  computed: {
  },
  methods: {
    getChildOrder() {
      if (!validatenull(this.childId)) {
        this.$http.get(api.ORDER_CHILD_DETAIL, { childId: this.childId }).then(
          res => {
            if (res.error.code === HTTPSUCCESS) {
              this.info = res.result
              this.info.status = this.info.status + ''
              if (this.info.officialPicture) {
                const officialList = packageImgList(this.info.officialPicture)
                this.info.officialNameList = officialList[0]
                this.info.officialUrlList = officialList[1]
              }
              if (this.info.productPicture) {
                const productList = packageImgList(this.info.productPicture)
                this.info.productNameList = productList[0]
                this.info.productUrlList = productList[1]
              }
              if (this.info.mainFabricPicture) {
                const bodyList = packageImgList(this.info.mainFabricPicture)
                this.info.bodyNameList = [this.info.mainFabricPicture]
                this.info.bodyUrlList = bodyList[1]
              }
              if (this.info.bolsterFabricPicture) {
                const pillowList = packageImgList(this.info.bolsterFabricPicture)
                this.info.pillowNameList = [this.info.bolsterFabricPicture]
                this.info.pillowUrlList = pillowList[1]
              }
              if (this.info.woodTexturePicture) {
                const woodenList = packageImgList(this.info.woodTexturePicture)
                this.info.woodenNameList = [this.info.woodTexturePicture]
                this.info.woodenUrlList = woodenList[1]
              }
              if (this.info.otherTexturePicture) {
                const otherList = packageImgList(this.info.otherTexturePicture)
                this.info.otherNameList = [this.info.otherTexturePicture]
                this.info.otherUrlList = otherList[1]
              }
              if (this.info.problemPicture) {
                const problemList = packageImgList(this.info.problemPicture)
                this.info.problemNameList = problemList[0]
                this.info.problemUrlList = problemList[1]
              }
            } else {
              this.$msg._message(res.error.msg, 'error')
            }
          }
        )
      }
    },
    judgeChildOrder() {
      if (validatenull(this.info.status)) return this.$msg._message('请审核货物', 'warning')
      if (this.info.status === '4') {
        if (validatenull(this.info.manufactorCode)) return this.$msg._message('请填写供货方订单编号', 'warning')
        if (validatenull(this.info.productCost)) return this.$msg._message('请填写货物成本', 'warning')
        if (validatenull(this.info.extraCost)) return this.$msg._message('请填写额外成本', 'warning')
        if (validatenull(this.info.paymentTime)) return this.$msg._message('请选择付款时间', 'warning')
      }
      const params = {
        id: this.childId,
        orderType: this.info.status,
        remark: this.info.itemMark,
        productCost: this.info.productCost,
        otherCost: this.info.extraCost,
        storeOrderNo: this.info.manufactorCode,
        paymentTime: this.info.paymentTime
      }
      this.$http.post(api.ORDER_JUDGE_CHILD, params).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            this.$msg._message('审核成功', 'success')
            this.$router.push({
              name: 'order'
            })
          } else {
            this.$msg._message(res.error.message, 'error')
          }
        }
      )
    },
    showImg(url) {
      this.$refs.view.showImg(url)
    }
  }
}
</script>

